<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/media/jquery-1.7.1.min.js"></script>
    <title>Sandbox</title>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#post").click(function () {
                var id = $("#exam-id").val();
                var params = "id: " + id;

                $.post("/exams/post_test", { id : '11'},
                        function(data) {
                            console.log(data);
                            var j = $.parseJSON(data);
                            $.each(j, function(key,val) {
                               $('#results > ul').append('<li>'+ val + '</li>')
                            });
                        }
                );

            });

            $("#get").click(function () {

                $.get("/exams/ajax_test", function(data) {
                   alert(data);
                });

            });

            $(document).ajaxSend(function(event, xhr, settings) {
                function getCookie(name) {
                    var cookieValue = null;
                    if (document.cookie && document.cookie != '') {
                        var cookies = document.cookie.split(';');
                        for (var i = 0; i < cookies.length; i++) {
                            var cookie = jQuery.trim(cookies[i]);
                            // Does this cookie string begin with the name we want?
                            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                }
                function sameOrigin(url) {
                    // url could be relative or scheme relative or absolute
                    var host = document.location.host; // host + port
                    var protocol = document.location.protocol;
                    var sr_origin = '//' + host;
                    var origin = protocol + sr_origin;
                    // Allow absolute or scheme relative URLs to same origin
                    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
                            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
                        // or any other URL that isn't scheme relative or absolute i.e relative.
                            !(/^(\/\/|http:|https:).*/.test(url));
                }
                function safeMethod(method) {
                    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
                }

                if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
                    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                }
            });


        });

    </script>
</head>

<body>

<div id="wrap">
    <h1>Come play in the sand...</h1>
    <div id="test">
        <input id="exam-id" type="text"/>
        <input id="post" value="POST" type="button"/>
        <input id="get" value="GET" type="button"/>
    </div>
    <div id="results">
        <ul>

        </ul>
    </div>
</div>

</body>
</html>